<template>
  <div>
    <div id="map"></div>
    <div style="position: absolute; top: 10px; left: 50px">
      
      <el-button size="mini" type="primary" @click="moveToChengDu">成都</el-button>
      <el-button size="mini" type="primary" @click="pointSet">设置点</el-button>
    </div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
// import TileLayer from "ol/layer/Tile";
// import OSM from 'ol/source/OSM';
import XYZ from "ol/source/XYZ";
import ZoomToExtent from "ol/control/ZoomToExtent";
import ZoomSlider from "ol/control/ZoomSlider";
import FullScreen from "ol/control/FullScreen";
//添加点要素
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import VectorSource from "ol/source/Vector";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import GeoJSON from "ol/format/GeoJSON";
// import { fromLonLat } from 'ol/proj';
export default {
  data() {
    return {
      map: null,
      zuobiao: [116.404, 39.915],
      pointArr: [116.404, 39.015],
      geojsonArr: [
        [116.404, 39.915],
        [116.514, 39.855],
        [116.624, 39.905],
      ],
    };
  },
  methods: {
    pointSet() {
      //设置点
      //geojson设置点要素-----------------------------------------------------------------------------
      var data = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            properties: {},
            geometry: {
              // type: "Point",//单个坐标点
              type: "MultiPoint", //多个坐标点
              // coordinates: [116.404, 39.215],//设置多个坐标点
              coordinates: this.geojsonArr,
            },
          },
        ],
      };
      const vectorSource2 = new VectorSource({
        //通过矢量数据源读取数据
        features: new GeoJSON().readFeatures(data, {
          featureProjection: "EPSG:4326",
        }),
        //       features: new GeoJSON().readFeatures(data, {
        //   dataProjection: 'EPSG:4326', // 原始数据坐标系
        //   featureProjection: 'EPSG:4326', // 目标坐标系
        // }),
      });
      const vectorLayer2 = new VectorLayer({
        source: vectorSource2,
        style: new Style({
          image: new CircleStyle({
            radius: 12,
            fill: new Fill({ color: "red" }),
            stroke: new Stroke({
              color: "blue",
              width: 2,
            }),
          }),
        }),
      });
      this.map.addLayer(vectorLayer2);
      //定位到北京
      var view = this.map.getView();
      // 设置地图中心为成都的坐标，即可让地图移动到成都
      // view.setCenter(proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));
      // view.setCenter(transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));
      view.setCenter([116.404, 39.915]);
      this.map.render();
    },
    moveToChengDu() {
      var view = this.map.getView();
      // 设置地图中心为成都的坐标，即可让地图移动到成都
      // view.setCenter(proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));
      // view.setCenter(transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));
      view.setCenter([104.06, 30.67]);
      this.map.render();
    },
    initMap() {
      // 高德地图层
      var gaodeMapLayer = new TileLayer({
        source: new XYZ({
          url: "http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        }),
      });
      this.map = new Map({
        target: "map",
        layers: [gaodeMapLayer],
        view: new View({
          // 设置成都为地图中心
          // center:proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
          center: this.zuobiao, //北京坐标116.404, 39.915 // 深圳坐标114.064839, 22.548857
          // 指定投影使用EPSG:4326
          projection: "EPSG:4326",
          zoom: 9,
        }),
      });
      //通过样式信息和几何信息构建点要素---------------------------------------------------
      const point = new Feature({
        // geometry: new Point(fromLonLat([116.404, 39.915])),//不要使用fromLonLat方法，否则不生效
        geometry: new Point(this.pointArr),
      });

      // 创建一个矢量图层
      const vectorSource = new VectorSource({
        features: [point], // 添加点要素到矢量源
      });

      const vectorLayer = new VectorLayer({
        source: vectorSource,
        style: new Style({
          //设置圆点样式
          image: new CircleStyle({
            radius: 10, // 圆点半径
            fill: new Fill({ color: "skyblue" }), // 圆点填充颜色
            stroke: new Stroke({
              color: "blue", // 边框颜色
              width: 2, // 边框宽度
            }),
          }),
        }),
      });

      // 将矢量图层添加到地图中
      this.map.addLayer(vectorLayer);

      //地图控件(已成功添加)--------------------------------------------------------------------
      //视图跳转控件
      const zoomToExtent = new ZoomToExtent({ extent: [110, 30, 160, 30] });
      this.map.addControl(zoomToExtent);
      //放大缩小控件
      const zoomSlider = new ZoomSlider();
      this.map.addControl(zoomSlider);
      //全屏控件
      const fullScreen = new FullScreen();
      this.map.addControl(fullScreen);
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
<style scoped>
#map {
  width: 100%;
  height: 98vh;
}
</style>
<style>
.ol-zoomslider {
  top: 7.5em;
}
</style>